---
type: tutorial
title: リポジトリをオンラインに保存する
description: |-
  「初めてのAstroブログ」チュートリアル -
  チュートリアルプロジェクトのGitHubリポジトリを作成する
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - プロジェクトリポジトリをオンラインに保存する
</PreCheck>

このチュートリアルでは、GitHubを使ってリポジトリの保存とウェブホストへの接続をおこないます。好みに応じてその他のオンラインgitプロバイダーを使っても構いません。

:::note
すでにgitに慣れていて、自分なりのワークフローがある場合は、お好きな方法でプロジェクト用のGitHubリポジトリを作成してください。次のページ[「ウェブ上にサイトをデプロイする」](/ja/tutorial/1-setup/5/)に進みましょう。
:::

## GitHubでリポジトリを作成する

ローカルのコードをGitHubに保存する方法はいくつかありますが、このチュートリアルでは、コマンドラインのgitを使わない方法を紹介します。

<Steps>
1. ブラウザでGitHub.comにログインし、画面右上の<kbd>+</kbd>をクリックして新しいリポジトリを作成します。

2. リポジトリの名前を決めます。プロジェクトフォルダーと同じ名前である必要はありません。

3. いくつかのオプションが表示されますが、デフォルトのままで構いません。下にスクロールして<kbd>Create Repository</kbd>ボタンをクリックします。

4. 次におこなうべきセットアップの手順が複数表示されますが、これらは必要ありません。リポジトリのURLをメモしておいてください。このままページを閉じて構いません。
</Steps>

## ローカルのコードをGitHubにコミットする

一つ前のセクションで、ページのコンテンツを変更しました。プロジェクトファイルが変更されたことにより、VS Codeの「ソース」メニューアイコンの上に数字が表示されているはずです。このソースタブは、GitHub上のファイルを更新するために定期的にアクセスする場所です。

<Steps>
1. ソース管理タブをクリックすると、変更されたファイルのリストが表示されます。`git`をインストールする必要があるというメッセージが表示された場合は、指示に従ってからVS Codeをリロードします。

2. コミットメッセージの上にある「3点リーダー」<kbd>•••</kbd>メニューをクリックし、<kbd>リモート</kbd> > <kbd>リモートを追加する</kbd>を選択します。

3. <kbd>GitHubからリモートを追加する</kbd>を選択します。必要に応じて、認証手順を踏んでからVS Codeに戻り、この操作を繰り返してください。

4. GitHub上のすべてのリポジトリのリストが表示されます。このプロジェクト用に作成したものを選択してください。プロジェクトが表示されない場合は、GitHubのURLを直接貼り付けてください。また、このリポジトリにローカルの名前を付けるように求められた場合は、お好きな名前を選んでください。

5. メニューペインの上部には、**コミットメッセージ**（ファイルの変更内容に関する説明）を入力する場所があります。`initial commit`と入力してから<kbd>コミット</kbd>ボタンを押して、変更をコミットします。

6. ステージされたコミットがないというメッセージが表示され、ステージするかどうか尋ねられる場合があります。<kbd>常時</kbd>をクリックして続行します。

7. 最後に、変更されたファイルのリストが<kbd>公開</kbd>ボタンに置き換わります。これをクリックして、コミットした変更をGitHubに送信します。
</Steps>

### GitHubでプロジェクトを確認する

プロジェクトがGitHubに正常に保存されているか確認するには、GitHub.comにアクセスし、自分のアカウントにあるリポジトリのリストを見てください。ここで新しく作成したリポジトリを選択し、Astroプロジェクトのファイルが含まれているか確認します。




<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] プロジェクトをGitHubに保存した。
</Checklist>
</Box>

### 参考

- <p>[Using Git Source control in VS Code](https://code.visualstudio.com/docs/sourcecontrol/overview#_git-support) <Badge class="neutral-badge" text="外部サイト" /></p>
